<!DOCTYPE html>
<html>

<head>
	<h1>Demo - Smooth Div Scroll</title>

		<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />

		<style type="text/css">
			#makeMeScrollable {
				width: 100%;
				height: 330px;
				position: relative;
			}

			#makeMeScrollable div.scrollableArea img {
				position: relative;
				float: left;
				margin: 0;
				padding: 0;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-o-user-select: none;
				user-select: none;
			}
		</style>

</head>

<body>

	<div id="makeMeScrollable">
		<img src="images/demo/field.jpg" alt="Demo image" id="field" />
		<img src="images/demo/gnome.jpg" alt="Demo image" id="gnome" />
		<img src="images/demo/pencils.jpg" alt="Demo image" id="pencils" />
		<img src="images/demo/golf.jpg" alt="Demo image" id="golf" />
		<img src="images/demo/river.jpg" alt="Demo image" id="river" />
		<img src="images/demo/train.jpg" alt="Demo image" id="train" />
		<img src="images/demo/leaf.jpg" alt="Demo image" id="leaf" />
		<img src="images/demo/dog.jpg" alt="Demo image" id="dog" />
	</div>

	<script src="js/jquery.js"></script>

	<script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>

	<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>

	<script src="js/jquery.kinetic.min.js" type="text/javascript"></script>

	<script src="js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>

	<script type="text/javascript">
		$(document).ready(function () {
			$("div#makeMeScrollable").smoothDivScroll({
				autoScrollingMode: "onStart",
				easingAfterHotSpotScrolling: false,
				autoScrollingDirection: "backAndForth",
				touchScrolling: true,
				manualContinuousScrolling: true,
				autoScrollingStep: 1,
				mousewheelScrolling: "allDirections",
				mousewheelScrollingStep: 50,
				hotSpotScrolling: true,
				hotSpotScrollingStep: 5,
				hotSpotMouseDownSpeedBooster: 1,
			});
		});
	</script>

</body>

</html>